OOCSS Object-Oriented CSS
オブジェクト指向のCSS
CSS Architecture 設計手法の古くて有名なもの
提案者:Nicole Sullivan
解決する課題、提供するもの
CSSの既存の課題
再利用されないcodeがたくさんあり、CSSファイルのサイズが大きくなっている
CSSが壊れやすい
CSSに以下提供
reusability 再利用性
maintainability 保守性
predictability 予測可能性
原則
Separate structure and skin (構造とスキンを分離する)
Separate container and content (コンテナとコンテンツの分離)
Separate structure and skin (構造とスキンを分離する)
スキン
繰り返し使われる視覚的な機能(背景や境界線のスタイルなど)を個別の「スキン」(class)として定義
スキンを様々なオブジェクトと組み合わせて使うことで、多くのコードを使わずに視覚的なバリエーションを得ることができる
スキンclassを使ってオブジェクトとそのコンポーネントに名前を付ける
直接HTML要素にスタイルを割り当てないので、HTMLを柔軟に変更可能に
Separate container and content (コンテナとコンテンツの分離)
場所に依存したスタイルをほとんど使わないこと
CSSオブジェクトは、どこに置いても同じように見えるべき
X特定の<h2>を.myObject h2 {...}でスタイリング
○<h2 class="category">のように、該当する<h2>を記述するクラスを作成して適用
これにより、以下のことが保証されます。
(1) クラス化されていない <h2> はすべて同じに見える
(2) カテゴリクラスを持つ要素 (mixin と呼ばれる) はすべて同じに見える
(3) 実際に .myObject h2 を通常の <h2> のように見せたい場合には、オーバーライドスタイルを作成する必要はない。(クラスを外すだけ)
前提
CSSオブジェクト
繰り返される視覚的なパターンのこと